<template>
  <!-- 全局引入TinyMCE -->

  <el-dialog
    v-model="proPopDialogVisible"
    title="商品信息选择"
    width="40%"
    center
    @close="closeDialog(false)"
    
    
  >
     <el-row :gutter="10">
      <el-col :span="8"
        ><el-input
          placeholder="搜索名称或型号"
          v-model="searchContent" width="120"
        ></el-input
      ></el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handlerSearch">搜索</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
       <el-table-column prop="name" label="名称" />
       <el-table-column prop="code" label="型号" />
       <el-table-column prop="unitName" label="单位" />
       <el-table-column label="操作" width="70">
        <template #default="scope">
          <el-button
            size="mini"
            @click="selectProduct(scope.row)"
            type="primary"
            >选择</el-button
          >
        </template>
        </el-table-column>
    </el-table>  
        <el-pagination
      style="float: right; margin-top: 10px"
      :currentPage="currentPage"
      :page-size="5"
      :page-sizes="[5,10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { useHandlerSearch,useHandleSizeChange,useHandleCurrentChange,loadData } from "../../utils/api";

export default {
  components: {},
  props: {
    proPopDialogVisible: Boolean
  },
  setup(props, { emit }) {

    const state = reactive({
      searchContent:'',
      total:0,
      pageSize:10,
      currentPage:1,
      shiftDialogVisible: props.shiftDialogVisible,
      tableData:[],
      baseUrl:"/order/basic/products",
      selectionIds:props.selectionIds
    });
    const closeDialog = (visible, data) => {
      emit("onProPopCloseDialog", false, {a:1});
    };
    const selectProduct = (row) => {
     
         emit("onProPopCloseDialog", false, row);
        
    };
    onMounted(() => {
      loadData(state,state.baseUrl);
    });
    return {
      ...toRefs(state),
      selectProduct,
      closeDialog,
      ...useHandlerSearch(state,state.baseUrl),
      ...useHandleSizeChange(state,state.baseUrl),
      ...useHandleCurrentChange(state,state.baseUrl),
    };
  },
};
</script>

<style>

.el-dialog{
  padding-bottom: 30px;
}

.el-form-item__error {
  padding-top: 0px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
}
.el-form-item {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>